<template>
  <view class="demo-container">
    <view class="demo-header">
      <text class="demo-title">OrderSuccessModal组件调试页面</text>
    </view>
    
    <view class="demo-content">
      <view class="control-panel">
        <text class="control-label">控制选项</text>
        
        <view class="control-group">
          <text class="control-item-label">显示/隐藏模态框:</text>
          <switch :checked="showModal" @change="toggleModal" color="#BEFF32"></switch>
        </view>
        
        <view class="control-group">
          <text class="control-item-label">使用props数据:</text>
          <switch :checked="usePropsData" @change="toggleUsePropsData" color="#BEFF32"></switch>
        </view>
        
        <button class="demo-button" @click="showModal = true">显示模态框</button>
        <button class="demo-button" @click="showModal = false" type="warn">隐藏模态框</button>
        <button class="demo-button" @click="simulateWebSocketMessage" type="default">模拟WebSocket消息</button>
      </view>
      
      <view class="preview-section">
        <text class="preview-label">预览效果</text>
        <view class="preview-container">
          <!-- 这里将显示订单成功模态框 -->
        </view>
      </view>
    </view>
    
    <!-- 引入订单成功模态框组件 -->
    <OrderSuccessModal 
      :visible="showModal" 
      :order="orderData" 
      @close="showModal = false"
      @order-success="handleOrderSuccess"
    />
  </view>
</template>

<script>
// 引入订单成功模态框组件
import OrderSuccessModal from '../../components/common/OrderSuccessModal.vue';

// 引入外部JS文件
import demoMethods from './order-success-modal-demo.js';

export default {
  name: 'OrderSuccessModalDemo',
  components: {
    OrderSuccessModal
  },
  // 合并外部JS文件的内容
  ...demoMethods
};
</script>

<style scoped lang="scss">
// 引入外部SCSS文件
@import './order-success-modal-demo.scss';
</style>